<template>
	<view class="content">
		<view class="appraise">
			<view class="appraise_item" v-for="(item,index) in evalCont" :key="index" @click="detail(item.unid)">
				<view class="img">
					<headimg :realSrc="item.usr_head"></headimg>
					<!-- <image :src="item.usr_head"></image> -->
				</view>
				<view class="appraise_content">
					<view class="appraise_top">
						<view class="appraise_name">{{item.usr_name}}</view>
						<view class="appraise_time">{{item.update_time}}</view>
						<view class="xinxi">
							<uni-rate :size="16" :readonly="true" :value="item.level" v-if="item.level"></uni-rate>
						</view>
					</view>
					<view class="appraise_bottom" v-html="item.context"></view>
				</view>
			</view>
			<uni-load-more v-if="evalCont.length > 8" :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue'
	import uniRate from '../../components/uni-rate/uni-rate.vue'
	import utils from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniRate,
			headimg,
			uniLoadMore
		},
		data() {
			return {
				package_id: '',
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				evalCont: [], //评价列表
			};
		},
		onLoad(e) {
			this.package_id = e.package_id;
			this.getEval();
		},
		methods: {
			/* 获取评价列表 */
			getEval() {
				var data = {
					limit: 10,
					page: this.page,
					package_id: this.package_id
				}
				this.$papi.apiPost('moblie/package/comment/infos',data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.list;
						for(var i = 0; i < list.length; i++) {
							list[i].update_time = list[i].update_time.substring(0, 16);
						}
						this.evalCont = this.reload ? list : this.evalCont.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.evalCont = [];
							uni.showToast({
								title: '暂无数据',
								icon: 'none'
							})
						} else {
							this.status = "noMore";
						}
					}
				});
			},
			/* 评价详情 */
			detail(id) {
				uni.navigateTo({
					url: '../tongbu/myRating?tid='+id+'&type=2'
				})
			}
		}
	};
</script>

<style lang="scss">
	page{
		background-color: #FAFAFA;
	}

	.uni-rate-icon {
		margin-right: 8upx !important;
	}


	.appraise {
		width: 690upx;
		margin: 40upx auto;
		border-radius: 20upx;
		background-color: #FFFFFF;

		.appraise_item {
			display: flex;
			justify-content: flex-start;
			margin: auto;
			padding: 20upx 30upx;
			border-top: 1px solid rgba(229, 229, 229, 1);

			.img {
				width: 70upx;
				height: 70upx;
				border-radius: 50%;
				margin-right: 15upx;
				
				uni-image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.appraise_content {
				width: 90%;
				display: flex;
				flex-direction: column;

				.appraise_top {
					display: flex;
					justify-content: flex-start;

					.appraise_name {
						color: #666666;
						font-size: 28upx;
						margin-right: 20upx;
					}

					.appraise_time {
						color: #CCCCCC;
						font-size: 28upx;
						margin-right: 20upx;
					}

					.xinxi {
						width: 30%;
						display: flex;
						align-items: center;
					}
				}

				.appraise_bottom {
					width: 100%;
					font-size: 34upx;
					color: #333333;
				}
			}
		}
		.appraise_item:first-child{
			border-top: none;
		}
	}
</style>
